<template>
  <div class="userManagementList">
    <!-- 查询条件 -->
    <UserSearch @search="reload"></UserSearch>
    <el-card class="box-card"
             shadow="never">
      <ele-pro-table ref="table"
                     :columns="columns"
                     :datasource="datasource"
                     :selection.sync="selection"
                     cache-key="systemUserTable">
        <!-- 名字 -->
        <template v-slot:realName="{ row }">
          <div class="realNameStyle">
            <img class="avaterName"
                 :src="row.avatar"
                 alt="" />
            <span>{{ row.nickname }}</span>
          </div>
        </template>
        <template v-slot:balance="{ row }">
          <div>
            {{row.balance?row.balance:'0'}}
          </div>
        </template>
        <template v-slot:commissionRecords="{ row }">
          <div>
            {{row.commissionRecords?row.commissionRecords:'----'}}
          </div>
        </template>
        <template v-slot:superiorUser="{ row }">
          <div v-if="row.superiorUser">
            <div class="realNameStyle">
              <img class="avaterName"
                   :src="row.superiorUser.avatar"
                   alt="" />
              <span>{{ row.superiorUser.username }}</span>
            </div>
          </div>
          <div v-else>-----</div>
        </template>
        <!-- 分销海报 -->
        <template v-slot:distributionGrCode="{ row }">
          <el-link type="primary"
                   :underline="false"
                   icon="el-icon-view"
                   @click="openInvoice(row.distributionQrCode)">
            查看
          </el-link>
          <!-- 下载 -->
          <!-- <el-link type="info"
                   :underline="false"
                   icon="el-icon-download"
                   @click="download(row.distributionQrCode)">
            公众号
          </el-link> -->
        </template>
        <!-- 操作 -->
        <template v-slot:action="{ row }">
          <!-- 余额管理 -->
          <el-link type="primary"
                   icon="el-icon-s-custom"
                   @click="viewDetail(row)"
                   :underline="false">
            余额管理
          </el-link>

          <el-link type="success"
                   icon="el-icon-s-data"
                   @click="rateDetail(row)"
                   :underline="false">
            积分管理
          </el-link>
          <!-- 修改信息 -->

          <el-popconfirm class="ele-action"
                         title="是否确定要删除该条信息"
                         @confirm="remove(row)">
            <template v-slot:reference>

              <el-link type="danger"
                       icon="el-icon-delete"
                       :underline="false">
                删除
              </el-link>

            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 用户余额管理 -->
    <drawerUserBalance :userId="userId"
                       :data="current"
                       @done="reload"
                       :drawerUserBalance.sync="drawerUserBalance"></drawerUserBalance>

    <drawerIntegralBalance :data="currentIntegral"
                           @done="reload"
                           :userId="userIdIntegral"
                           :drawerRateBalance.sync="drawerRateBalance"></drawerIntegralBalance>

    <!-- 修改信息 -->
    <drawerModifyData :drawerModifyData.sync="drawerModifyData"
                      :data="currentModifyData"></drawerModifyData>

    <el-dialog title="分销海报码"
               :visible.sync="dialogVisible"
               width="25%"
               :before-close="handleClose">

      <img class="imgCode"
           :src="qRCode"
           alt="">
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 图片预览 -->
    <!-- <el-image-viewer v-if="showViewer"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="urlListArray" /> -->
  </div>
</template>
<script>
import UserSearch from './user-search.vue';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { getBySelectUserList, userListDelete } from '@/api/userList/index.js';
import drawerUserBalance from './drawerUserBalance.vue';
import drawerIntegralBalance from './drawerIntegralBalance.vue';
import drawerModifyData from './drawerModifyData.vue';
// import drawerDetail from './drawerDetail.vue'
import {
  serviceStatusList,
  realNameAuthenticationList,
  userManagementList
} from '../constant/constant';
export default {
  name: 'userManagementList',
  components: {
    // 用户余额管理
    drawerUserBalance,
    // 用户管理
    drawerModifyData,


    // 积分管理
    drawerIntegralBalance,
    UserSearch,
  },
  data () {
    return {
      userManagementList,
      //  技能评分
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      current: null,
      value: 4,
      showViewer: false,
      imgViewArr: [],
      dialogVisible: false,
      userId: '',
      // 表格列配置
      columns: [
        // {
        //   columnKey: 'selection',
        //   type: 'selection',
        //   width: 45,
        //   align: 'center',
        //   fixed: 'left'
        // },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'realName',
          label: '用户信息',

          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 130,
          slot: 'realName'
        },
        {
          prop: 'balance',
          label: '用户余额',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'balance'
        },
        {
          prop: 'integral',
          label: '用户积分',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'orderCount',
          label: '下单(数)',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          prop: 'commissionRecords',
          label: '用户佣金',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,
          slot: 'commissionRecords'
        },
        {
          prop: 'superiorUser',
          label: '用户上级',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'superiorUser'
        },
        {
          prop: 'distributionGrCode',
          label: '分销海报',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 210,
          slot: 'distributionGrCode'
        },

        {
          prop: 'createTime',
          label: '创建时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 130,
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          }
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 420,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,

          fixed: 'right'
        }
      ],
      // 表格选中数据
      selection: [],
      // 抽屉是否显示
      drawerUserBalance: false,
      //   积分是否显示
      drawerRateBalance: false,
      // 修改信息
      drawerModifyData: false,
      userIdIntegral: '',
      currentIntegral: null,
      currentModifyData: null,
      qRCode: ''
    };
  },
  activated () {
    this.reload()
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    urlListArray () {
      return this.imgViewArr;
    }
  },
  methods: {
    // 点击查看详情弹出详情抽屉
    viewDetail (row) {
      // 用户余额管理
      this.drawerUserBalance = !this.drawerUserBalance;
      // 评论
      this.userId = row.userId;
      this.current = row;
      // this.drawComment = !this.drawComment
    },
    rateDetail (row) {
      this.drawerRateBalance = !this.drawerRateBalance;
      // 评论
      this.userIdIntegral = row.userId;
      this.currentIntegral = row;
    },
    // 修改信息
    modifyData (row) {
      this.drawerModifyData = !this.drawerModifyData;
      this.modifyDataId = row.userId;
      this.currentModifyData = row;
    },

    /* 表格数据源 */
    datasource ({ page, limit, where, order }) {
      if (!where.deleted)
        return getBySelectUserList({
          page,
          limit,
          siteId: this.$store.state.site.info.id,
          ...where
        });
      //   return Promise.resolve({ count: 2, list: userManagementList });  // 由于不能新增 使用types和总端一样的传值1
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    },
    /* 刷新表格 */
    reload (where) {
      console.log(where)
      this.$refs.table.reload({ page: 1, where: where });

    },
    //    查看海报
    openInvoice (imgStr) {
      // 点击按钮预览图片

      console.log(imgStr);
      this.dialogVisible = true
      this.qRCode = imgStr

      //   this.imgViewArr = [imgStr]

      // if (imgStr?.length) {
      //   if (imgStr.includes(',')) {
      //     console.log('字符串中包含逗号');
      //     // 包含的进行slice(',') 分割
      //     this.imgViewArr = imgStr.split(',').map((item) => item.trim());
      //   } else {
      //     console.log('字符串中不包含逗号');
      //     this.imgViewArr = imgStr.split();
      //   }

      //   this.showViewer = true;
      // } else {
      //   this.$message({
      //     message: '没有上传图片无法进行预览',
      //     type: 'warning'
      //   });
      // }
    },
    /* 删除 */
    remove (row) {
      const loading = this.$loading({ lock: true });

      userListDelete(row.userId)
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch () {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的套餐吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          removeMeal({ ids: this.selection.map((d) => d.id) })
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    }
  }
};
</script>
<style lang="less" scoped>
.imgCode {
  width: 100%;
  height: 300px;
}
.userManagementList {
  .realNameStyle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .avaterName {
      width: 32px;
      height: 32px;
      border-radius: 32px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}
/deep/.el-button--mini {
  padding: 9px 8px;
}
</style>
